<template>
  <div>
    <el-form :inline="true" :model="courseQuery" class="demo-form-inline" style="padding: 10px 0;">
      <el-form-item label="课程名称">
        <el-input v-model="courseQuery.title" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="courseQuery.status" placeholder="课程状态">
          <el-option label="未选择" value="null"></el-option>
          <el-option label="已发布" value="Normal"></el-option>
          <el-option label="未发布" value="Draft"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="searchData" icon="el-icon-search" plain/>
        <el-button type="danger" @click="resetData" icon="el-icon-delete" plain/>
      </el-form-item>

    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center"/>
      <el-table-column prop="title" label="课程名称" align="center"/>
      <el-table-column prop="status" label="课程状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status==='Normal'?'已发布':'未发布' }}
        </template>
      </el-table-column>
      <el-table-column prop="lessonNum" label="总课时" align="center"/>
      <el-table-column prop="buyCount" label="销售数量" align="center"/>
      <el-table-column prop="gmtCreate" label="创建时间"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <!-- <router-link :to="'/edu/teacher/edit'+scope.row.id"> -->
          <el-button type="text" size="medium" icon="el-icon-edit" @click="getCourseInfo(scope.row.id)" round>编辑课程基本信息</el-button>&nbsp;
          <el-button type="text" size="medium" icon="el-icon-edit" @click="getCourseIndex(scope.row.id)" round>编辑课程大纲</el-button>&nbsp;
          <el-button type="text" size="medium" icon="el-icon-delete" @click="removeDataById(scope.row.id)" round>删除</el-button>

          <el-dialog title="编辑课程基本信息" :visible.sync="updateCourseInfoForm">

            <el-form :model="formInfo">
              <el-form-item label="课程讲师" :label-width="formLabelWidth">
                <el-select v-model="formInfo.teacherId" placeholder="请选择">
                  <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="课程分类" :label-width="formLabelWidth">
                <el-select v-model="formInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
                  <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title" :value="subject.id" />
                </el-select>&nbsp;

                <el-select v-model="formInfo.subjectId" placeholder="二级分类">
                  <el-option v-for="subject in subjectTwoList" :key="subject.id" :label="subject.title" :value="subject.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="课程名称" :label-width="formLabelWidth">
                <el-input v-model="formInfo.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程价格" :label-width="formLabelWidth">
                <el-input v-model="formInfo.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="总课时" :label-width="formLabelWidth">
                <el-input v-model="formInfo.lessonNum" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程封面" :label-width="formLabelWidth">
                <el-input v-model="formInfo.cover" placeholder="封面地址" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程简介" :label-width="formLabelWidth">
                <el-input v-model="formInfo.description" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程状态" :label-width="formLabelWidth">
                <el-select v-model="formInfo.status" placeholder="请选择">
                  <el-option label="未发布" value="Draft"></el-option>
                  <el-option label="已发布" value="Normal"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="noupdateCourseInfo">取 消</el-button>
              <el-button type="primary" @click="updateCourseInfo">确 定</el-button>
            </div>

          </el-dialog>
          <!-- </router-link> -->

        </template>
      </el-table-column>
    </el-table>
    <br/>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page= this.page
        :page-sizes="[5, 10, 15, 20]"
        :page-size=this.limit
        style="padding: 30px 0; text-align: center"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import list from '@/api/edu/list'
import course from "@/api/edu/course";
import subject from "@/api/edu/subject";

export default {
  data() {
    return {
      level: 1,
      page: 1,
      limit: 5,
      total: 0,
      courseQuery: {},
      list: null,
      updateCourseInfoForm: false,
      updateCourseIndexForm: false,
      formInfo: {
        teacherId: '',
        subjectParentId: '',
        subjectId: '',
        title: '',
        price: '',
        lessonNum: '',
        cover: '',
        status: '',
        description: ''
      },
      formIndex: {},
      formLabelWidth: '120px',
      subjectOneList: [],
      subjectTwoList: [],
      teacherList: [],
      courseId: ''

    }
  },
  created() {
    this.getOneSubject()
    this.getListTeacher()
    this.getList()
    // console.log(this.subjectOneList)
  },
  methods: {
    getList() {
      list.getCourseListPage(this.page, this.limit, this.courseQuery)
        .then(res => {
          // console.log(res)
          this.list = res.data.records
          this.total = res.data.total

        })
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    searchData() {
      this.getList()
    },
    resetData() {
      this.courseQuery = {}
      this.getList()
    },
    // 编辑课程基本信息弹框
    getCourseInfo(courseId) {
      course.getCourseInfoId(courseId)
        .then(res => {
          this.formInfo = res.data.courseInfoVo
          console.log(this.formInfo)
          this.updateCourseInfoForm = true
          for (let i = 0; i < this.subjectOneList.length; i++) {
            // 每个一级分类
            let oneSubject = this.subjectOneList[i]
            // 判断：所有一级分类的id 和 点击一级分类的id是否一样
            if (this.formInfo.subjectParentId === oneSubject.id) {
              this.subjectTwoList = oneSubject.children
            }
          }
        })
    },
    getCourseIndex() {

    },
    noupdateCourseInfo() {
      this.$notify({
        type: 'info',
        message: '已取消修改',
        showClose: false
      })
      this.updateCourseInfoForm = false
      this.getList()
      this.formInfo = {}
    },
    updateCourseInfo() {
      this.$confirm('此操作将修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        course.updateCourseInfoId(this.formInfo)
        this.$notify({
          type: 'success',
          message: '修改成功!',
          showClose: false
        })
        this.updateCourseInfoForm = false
        this.getList()
        this.formInfo = {}
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消修改',
          showClose: false
        })
        this.updateCourseInfoForm = false
        this.getList()
        this.formInfo = {}
      })
    },
    // 点击某一级分类，出发change，显示对应的二级分类
    subjectLevelOneChanged(value) {
      // value就是一级分类的id值
      // 遍历所有分类，包含一级二级
      for (let i = 0; i < this.subjectOneList.length; i++) {
        // 每个一级分类
        let oneSubject = this.subjectOneList[i]
        // 判断：所有一级分类的id 和 点击一级分类的id是否一样
        if (value === oneSubject.id) {
          this.subjectTwoList = oneSubject.children
        }
      }
      this.formInfo.subjectId = ''
    },
    removeDataById(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        list.deleteCourse(id)
        this.getList()
        this.$notify({
          type: 'success',
          message: '删除成功!',
          showClose: false
        })
      }).catch(() => {
        this.getList()
        this.$notify({
          type: 'info',
          message: '已取消删除',
          showClose: false
        })
      })
    },
    // 查询所有一级分类
    getOneSubject() {
      subject.getSubjectList()
        .then(res => {
          this.subjectOneList = res.data.list
        })
    },
    // 查询所有讲师
    getListTeacher() {
      course.getListTeacher()
        .then(res => {
          this.teacherList = res.data.items
          // console.log(res)
        })
    }
  }
}
</script>
